<!doctype html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath }/css/common.css">
	<link rel="stylesheet" href="${ pageContext.request.contextPath }/css/jquery-ui.css" />
	<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.6.2.js"></script>
	<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></script>
	<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery.livequery.min.js"></script>
	<script type="text/javascript" src="${ pageContext.request.contextPath }/js/scrum-shrink.js"></script>
	<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery.form.js"></script>
	<title>Style of drag and drop</title>
</head>
<body onload="oninit()">
    <s:hidden name="sprintId" value="%{sprintId}"></s:hidden>
	<div id="main_drag_area">
		<div class="shrink_area left">
			<!-- 公共成员区 -->
			<div id="public" class="left">
				<div class="group">
					<div class="group_box" id="box0">
						<h2>备选故事</h2>
						<ul>
							<s:iterator value="storysByStatus0" var="story0">
								<li class="members" id="card<s:property value='%{#story0.id}'/>">
									<div class="drag_box" rel="<s:property value='%{#story0.id}'/>">
										<h4><s:property value="%{#story0.name}"/></h4>
										<div class="story_item">
											<label>优先级：</label>
											<span><s:property value="%{#story0.priority}"/></span>
										</div>
										<div class="story_item">
											<label>点数：</label>
											<span><s:property value="%{#story0.point}"/></span>
										</div>
									</div>
								</li>
							</s:iterator>
						</ul>
					</div>
				</div>
			</div>
			<!-- 伸缩条 -->
			<div class="drag_bar left">
				<div class="drag_bar_table">
					<a href="javascript:void(0)" class="click_shrink"></a>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<!-- 分组区 -->
		<div id="groupsall" class="left">
			<div class="group group_col">
				<div class="group_box" id="box1">
					<h2>计划的故事</h2>
					<ul>
						<s:iterator value="storysByStatus1" var="story1">
							<li>
								<div class="drag_box" rel="<s:property value='%{#story1.id}'/>">
									<h4><s:property value="%{#story1.name}"/></h4>
									<div class="story_item">
										<label>优先级：</label>
										<span><s:property value="%{#story1.priority}"/></span>
									</div>
									<div class="story_item">
										<label>点数：</label>
										<span><s:property value="%{#story1.point}"/></span>
									</div>
								</div>
							</li>
						</s:iterator>
					</ul>
				</div>
			</div>
			<div class="group box2 group_col">
				<div class="group_box" id="box2">
					<h2>进行的故事</h2>
					<ul>
						<s:iterator value="storysByStatus2" var="story2">
							<li>
								<div class="drag_box going_story left" rel="<s:property value='%{#story2.id}'/>">
									<h4><s:property value="%{#story2.name}"/></h4>
									<div class="story_item">
										<label>优先级：</label>
										<span><s:property value="%{#story2.priority}"/></span>
									</div>
									<div class="story_item">
										<label>点数：</label>
										<span><s:property value="%{#story2.point}"/></span>
									</div>
								</div>
								<div class="story_tasks left" id="story<s:property value='%{#story2.id}'/>tasks">
									<ul>
										<li><a class="add_task_btn" id="addTask<s:property value='%{#story2.id}'/>" >+</a></li>
										<s:iterator value="tasks">
											<li>12</li>
										</s:iterator>
									</ul>
									<div id="taskForm<s:property value='%{#story2.id}'/>" title="新建任务"></div>
									<script type="text/javascript">
										$(function() {
											$( "#taskForm"+"<s:property value='%{#story2.id}'/>" ).dialog({
									            autoOpen: false,
									            height: 400,
									            width: 500,
									            modal: true,
									            buttons: {
									            	"保存": function() {
									            		$("#saveTask").submit(function() {
									            			var options = {
									            				target:  "#story<s:property value='%{#story2.id}'/>tasks",
									            				success: function(data){		
										    						$.each(data.tasksOfStory,function(idx,item){  
										    							console.log(item.title); 
										    						});
										    						
										    					}
									            			};
									            			$(this).ajaxSubmit();
									            			return false;
									            		});
									            	},
									            	"取消": function() {
									                    $( this ).dialog( "close" );
									                }
									            }
											});
											$( "#addTask"+"<s:property value='%{#story2.id}'/>" ).click(function() {
												$("#taskForm"+"<s:property value='%{#story2.id}'/>").load("../task/addTask.action?storyId=<s:property value='%{#story2.id}'/>");
								                $( "#taskForm"+"<s:property value='%{#story2.id}'/>" ).dialog( "open" );
								            });
										});
									</script>
								</div>
								<div class="clear"></div>
							</li>
						</s:iterator>
					</ul>
				</div>
			</div>
			<div class="group group_col">
				<div class="group_box" id="box3">
					<h2>完成的故事</h2>
					<ul>
						<s:iterator value="storysByStatus3" var="story3">
							<li>
								<div class="drag_box" rel="<s:property value='%{#story3.id}'/>">
									<h4><s:property value="%{#story3.name}"/></h4>
									<div class="story_item">
										<label>优先级：</label>
										<span><s:property value="%{#story3.priority}"/></span>
									</div>
									<div class="story_item">
										<label>点数：</label>
										<span><s:property value="%{#story3.point}"/></span>
									</div>
								</div>
							</li>
						</s:iterator>
					</ul>
				</div>
			</div>
			<div class="group group_col">
			   <div> 
			      <a href="${ pageContext.request.contextPath }/project/listProject.action"><h5>返回项目列表页面</h5></a>
			   </div>
				<div class="group_box" id="box5">
				 <img src='${ pageContext.request.contextPath }/statistics/prepareSprintBurnDownChart.action?sprintId=<s:property value="sprintId" />' width="200" height="300"></img>
				</div>
			</div>
			<div id="createsprint">
	             <s:form name="addSprint" action="addSprint" method="POST" theme="simple">
					    <s:hidden name="projectId" value="%{projectId}"/>
					     <s:hidden name="fromKanban" value="Y"/>
						<fieldset>
								<legend>阶段</legend>
								<table id="sprint_tb" >
									<tr>
										<td>
										<s:label>阶段名称：</s:label>
										<s:textfield name="sprint.name"></s:textfield>
										</td>
									</tr>
									<tr>
										<td>
										<s:label>开始时间：</s:label>
										<s:textfield name="sprint.startTime" id="sttm"></s:textfield>
										</td>
										<td>
										<s:label>结束时间：</s:label>
										<s:textfield name="sprint.endTime" id="endtm"></s:textfield>
										</td>
									</tr>
									<tr>
										<td>
										<s:label>阶段状态：</s:label>
										<s:textarea name="sprint.status"></s:textarea>
										</td>
									</tr>
									
									<tr>
										<td>
										<s:submit value="提交"></s:submit>
										<td><a href="${ pageContext.request.contextPath }/project/viewProject.action?projectId=<s:property value='projectId'/>">返回项目</a></td>
										</td>
									</tr>
								</table>
						</fieldset>
		  </s:form>
	        </div>
		</div>
		<div class="clear"></div>
	</div>
	
	<script type="text/javascript" >
	   // open a dialog to create current sprint
		$(function() {
			DIALOG = $("#createsprint");
			DIALOG.dialog({autoOpen: false, 
				                    title: "没有活跃阶段，请创建Sprint",
					                modal: true,
					                width :500,
					                height:300,
	                                close: function() {}
	                                });
		    var sprintid=$("#sprintId").val();
		    if(sprintid=="" || sprintid==null){
		    	DIALOG.dialog("open");
		    	$( "#sttm" ).datepicker({showButtonPanel: true});
				$( "#endtm" ).datepicker({showButtonPanel: true});
		    }
		    	
		    
			// Initiate draggable for public and groups
			var $gallery = $( ".group" );
			$( ".drag_box", $gallery ).live("mouseenter", function(){
				 var $this = $(this);
				  if(!$this.is(':data(draggable)')) {
				    $this.draggable({
				     	helper: "clone",
						containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", 
						cursor: "move"
				    });
				  }
			});
			
			// Initiate Droppable for groups
			// Adding members into groups
			// Removing members from groups
			// Shift members one group to another
			
			$(".group_box").livequery(function(){
				var casePublic = false;
				$(this).droppable({
					activeClass: "ui-state-highlight",
					drop: function( event, ui ) {
						var card_id = $(ui.draggable).attr('rel');
						if(!card_id)
							{
								casePublic = true;
								var card_id = $(ui.draggable).attr("id");
								card_id = card_id.substring(4);
							}
						var box_id = $(this).attr('id');
						box_id = box_id.substring(3);
						dropPublic(card_id, box_id, casePublic);
						$("#card"+card_id).hide();
						$( "<li></li>" ).html( ui.draggable ).appendTo( this > "ul" );
					},
					 out: function(event, ui) {
					 	var card_id = $(ui.draggable).attr('rel');
						var box_id = $(this).attr('id');
					 	$(ui.draggable).hide("explode", 1000);
					 	removeMember(box_id,card_id);
					 }
				});
			});
			
			// Add or shift members from groups
			function dropPublic(card_id, box_id,caseFrom) {
				$.ajax({
					type:"GET",
					url:"${pageContext.request.contextPath}/sprint/ajaxStoryUpdate.action?card_id="+card_id+"&box_id="+box_id+"&sprintId="+$("#sprintId").val(),
					cache:false,
					success:function(data){		
						//var dataObj=eval("("+data+")");
						var replacecardList = $("");
						replacecardList.replaceAll($("#box"+box_id+" ul li"));
						$.each(data.stories,function(idx,item){  
							//alert(item.id+"哈哈"+item.name); 
							var cardList = $("<li><div class='drag_box' rel='"+item.id+"'><h4>"+item.name+"</h4></div></li>");
							$("#box"+box_id+" ul").append(cardList);
						})
						
					}
				});
			}
			// Remove memebers from groups
			// It will restore into public groups or non grouped members
			function removeMember(box_id,card_id) {
				$.ajax({
					type:"GET",
					url:"${pageContext.request.contextPath}/sprint/ajaxStoryUpdate.action?action=drop&card_id="+card_id+"&sprintId="+$("#sprintId").val(),
					cache:false,
					success:function(response){
						$("#removed"+card_id).animate({"opacity" : "10" },10);
						$("#removed"+card_id).show();
						$("#removed"+card_id).animate({"margin-top": "-50px"}, 450);
						$("#removed"+card_id).animate({"margin-top": "0px","opacity" : "0" }, 450);
						$.get("${pageContext.request.contextPath}/story/ajaxStoryUpdate.action?action=reload", function(data){ $("#public").html(data); });
					}
				});
			}
			
			$(".click_shrink").click(function() {
				$("#public").slideToggle("fast");
				$(this).toggleClass("active");
				setTimeout('setBoxWidth()', 200);
			});
			
		});
	</script>
</body>
</html>